<template>
	<!-- 师傅资料编辑 -->
	<view>
		<view class="message">
			<uni-list-item class="message-img" title="头像" v-if="userInfo.is_worker == 2" clickable @click="onClick">
				<template slot="footer">
					<image class="slot-image" :src="userInfo.avatar" mode="widthFix"></image>
				</template>
			</uni-list-item>
			<uni-list-item class="message-img" title="门店照片" v-if="userInfo.is_worker == 1" clickable @click="onClick">
				<template slot="footer">
					<image class="slot-image" :src="userInfo.avatar" mode="widthFix"></image>
				</template>
			</uni-list-item>
			<uni-list-item title="姓名" v-if="userInfo.is_worker == 2" :rightText="userInfo.nickname" link>
				<template slot="footer">
					<input type="text " v-model="userInfo.nickname" placeholder="昵称" class="input" />
				</template>
			</uni-list-item>
			<uni-list-item title="门店名称" v-if="userInfo.is_worker == 1" :rightText="userInfo.nickname" link>
				<template slot="footer">
					<input type="text " v-model="userInfo.nickname" placeholder="昵称" class="input" />
				</template>
			</uni-list-item>
			<uni-list-item title="工时费" v-if="userInfo.is_worker == 2" link @click="onClick">
				<template slot="footer">
					<input type="text " v-model="userInfo.unit_price" placeholder="工时费" class="input" />
				</template>
			</uni-list-item>
			<uni-list-item title="门店地址" v-if="userInfo.is_worker == 1" link @click="onClick">
				<template slot="footer">
					<text class='iconfont' style="color: #1296db;font-size:36rpx;" @click="addrClick">
						&#xe612;
						<text style="font-size: 20rpx;">(点击选择门店位置)</text>
					</text>
					<input type="number" v-if="userInfo.addres" disabled="true" placeholder="请输入门店详细位置"
						style="font-size: 20rpx;color: #999;width: 80%;" v-model="userInfo.addres"></input>
				</template>
			</uni-list-item>
			<uni-list-item title="电话号码" :rightText="userInfo.phone" clickable @click="onClick"></uni-list-item>
		</view>

		<view class="service" v-if="userInfo.is_worker == 2">
			<uni-list-item title="资质审核" link to="/pages/sf/zzsh/zzsh" clickable :rightText="zzsh"></uni-list-item>
			<uni-list-item title="缴纳保险金" :rightText="userInfo.is_bond===0 ? '尚未缴纳保证金' : yj " link clickable
				@click="payOrder"></uni-list-item>
			<uni-list-item title="紧急联系人" :rightText="userInfo.contact_user_name" clickable @click="onClick">
			</uni-list-item>
			<uni-list-item title="服务区域" link>
				<template slot="footer">
					<picker @change="bindPickerChange" :value="region" mode="region" :custom-item="customItem">
						<view class="uni-input">{{region[0]}},{{region[1]}},{{region[2]}}</view>
					</picker>
				</template>
			</uni-list-item>
			<uni-list-item title="服务标签" >
				<template slot="footer">
					<view class="choose flex">
						<uniChcek v-model="activearr" min="0" max="6" mode="tag" selectedColor="#029E8E"
							selectedTextColor="#ffffff" :localdata="commitList" :multiple="true" @change="check">
						</uniChcek>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="联系地址" :rightText="userInfo.addres" clickable @click="onClick"></uni-list-item>
		</view>
		<view class="footer">
			<button  @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		Deposit,
		selectAddress,
		addressResolution,
		chooseType,
		userinfo,
		update_user
	} from '../../../api/api.js'
	import uniChcek from '../../../components/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue'
	export default {
		components: {
			uniChcek
		},
		data() {
			return {
				userInfo: {},
				zzsh: "",
				activearr:[],
				yj: '',
				commitList:[],
				color: "",
				longitude: "",
				region: [],
				latitude: "",
				customItem: "全部",
			}
		},
		created() {
			this.updata()
			let tag = uni.getStorageSync('tag')
			
			tag.forEach(item => {
				item.text = item.name
				item.value = item.id
			})
			this.commitList = tag
			console.log('this.commitList',this.commitList)
		},

		methods: {
			updata() {
				userinfo().then(res => {
					this.userInfo = res.data
					console.log(this.userInfo, '0000')
					uni.setStorageSync('userInfo', this.userInfo)
					let city = uni.getStorageSync('city')
					this.verify_status = this.userInfo.verify_status
					console.log('userInfo', this.userInfo, city)
					if(this.userInfo.worker_type){
						this.activearr = this.userInfo.worker_type
					}
					this.region[0] = city.province || '未选择'
					this.region[1] = city.city || '未选择'
					this.region[2] = city.district || '未选择'
					this.yj = '已缴纳保证金' + this.userInfo.deposit_money + '元'
					if (this.verify_status == 0) return this.zzsh = '未申请'
					this.color = '#333'
					if (this.verify_status == 1) return this.zzsh = '申请中'
					this.color = 'blue'
					if (this.verify_status == 2) return this.zzsh = '已通过'
					this.color = '#09BB07'
					if (this.verify_status == 3) return this.zzsh = '未通过'
					this.color = 'red'

				})
			},
			// 选择评价类型
			check(e) {
				console.log(e, this.activearr)
			},
			addrClick() { // 地址选择事件
				const _this = this;
				uni.chooseLocation({
					success: (res) => {
						console.log(res, 1)
						let {
							address,
							name,
							latitude,
							longitude
						} = res;
						_this.longitude = longitude
						_this.latitude = latitude
						_this.userInfo.addres = address + name;
					},
					fail: (res) => {
						console.log(res, 2)
					}
				})
			},
			// 编辑保存
			save() {
				let comment_ids = ''
				comment_ids = this.activearr.toString()
				let data = {
					nickname: this.userInfo.nickname,
					unit_price: this.userInfo.unit_price,
					// contact_user_name:this.userInfo.contact_user_name,
					// addres:this.userInfo.addres
					address: this.userInfo.addres,
					longitude: this.longitude,
					latitude: this.latitude,
					lables:comment_ids
				}
				let that = this
				update_user(data).then(res => {
					that.updata()
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					})
				})
			},
			bindPickerChange(e) {
				console.log(e)
				this.region = e.detail.value
				if (e.detail.code.length != 3) return uni.showToast({
					title: "请具体到区域!",
					icon: 'none'
				});
				let data = {
					service_city_id: e.detail.code[2]
				}
				selectAddress(data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'success'
					});
				})
			},
			onClick() {

			},
			/**
			 * 支付保险金
			 */
			payOrder() {
				if (this.userInfo.is_bond !== 0) return;
				Deposit().then(res => {
					let data = res.data

					uni.requestPayment({
						appId: data.appId,
						timeStamp: data.timestamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							// 支付成功的回调中 创建绘本馆成功
							uni.showToast({
								title: "支付成功！",
								icon: "none"
							})
						},
						fail: function(err) {
							console.log('取消', err)
							uni.showToast({
								title: '支付取消',
								duration: 1500,
								icon: 'none'
							});

							// that.$api.msg('支付取消', 1000);
						}
					})
				})
			},
		}
	}
</script>

<style scoped lang="less">
	page>view {
		padding: 20rpx 0;
		background: #F7F5F6;
	}

	.slot-image {
		width: 80rpx !important;
		height: 80rpx !important;
		/* background: red; */
		border-radius: 50%;
	}

	/deep/.uni-list-item {
		font-size: 34rpx;
		border-bottom: 5rpx solid #F7F5F6;
		position: static;
	}

	.message {
		margin-bottom: 20rpx;
	}

	.message-img /deep/.data-v-ec94b0a8 {
		height: 80rpx;
	}

	.message-img /deep/.uni-list-item__content-title {
		line-height: 80rpx !important;
	}

	.message-img /deep/.uni-list-item__container {
		padding: 14rpx 30rpx;
	}

	.choose {
		width: 100%;
		padding: 30rpx 50rpx;
	}

	.uni-input {
		font-size: 26rpx;
		color: #666666;
	}

	.from {
		width: 85%;
		margin-left: 50%;
		transform: translateX(-50%);


	}

	.footer {
		position: fixed;
		bottom: 15%;
		left: 50%;
		transform: translateX(-50%);

	}

	.input {
		text-align: end;
		font-size: 26rpx;
		color: #999999;
	}

	/deep/.uni-list-item__extra-text {
		width: 458rpx;
		width: 458rpx;
		text-align: end;
		word-break: break-word;
		color: #999;
		font-size: 24rpx;
	}
</style>
